<template>
  <el-tabs v-model="active" @tab-click="handleClick">
<!--     <el-tab-pane label="哲学" name="first">
      <span slot="label">我的行程</span>
    </el-tab-pane> -->
    <el-tab-pane
      v-for="(item, index) in data"
      :key="index"
      :label="item.name?item.name:item"
      :name="item.id?item.id+'':index+''">
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data () {
    return {
      active: ''
    }
  },
  props: ['data', 'value'],
  created () {
  // mounted () {
    // 必须就字符串，所以加空格转换一下
    this.active = this.value + ''
    if (!this.value) {
      this.active = Array.isArray(this.data) ? '0' : this.data[0]['id'] + ''
    }
    // this.$forceUpdate()
  },
  methods: {
    handleClick (tab, event) {
      this.$emit('event', parseInt(this.active))
    }
  },
  watch: {
    value: function (val, oldVal) {
      if (val !== oldVal) {
        this.active = this.value + ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ {
  .el-tabs__nav-wrap::after{
    height:1px;
    background-color: $line;
  }
  .el-tabs__item.is-active{
    color:#333;
  }
  .el-tabs__active-bar{
    background-color:#333;
  }
  .el-tabs__item{
    color: $stable-ad;
    font-size:16px;
    // padding:0 10px;
  }
  .el-tabs__item:hover{
    color: #333;
  }
  .el-tabs__header{
    margin:0
  }
}
</style>
